<template>
  <div class="mod-home">
    <div class="flex banner">
      <div class="flex">
        <div>
          <div class="num">{{numObj.monthSaleNumber}}</div>
          <div>本月订单数</div>
        </div>
        <div>
          <img src="@/assets/img/rzqy.png" alt="">
        </div>
      </div>
      <div class="flex">
        <div>
          <div class="num">{{numObj.monthSaleMoney}}</div>
          <div>本月现金入账</div>
        </div>
        <div>
          <img src="@/assets/img/XMSJ.png" alt="">
        </div>
      </div>
      <div class="flex">
        <div>
          <div class="num">{{numObj.monthRefundNumber}}</div>
          <div>本月退单数</div>
        </div>
        <div>
          <img src="@/assets/img/ZJXX.png" alt="">
        </div>
      </div>
      <div class="flex">
        <div>
          <div class="num">{{numObj.monthRefundMoney}}</div>
          <div>本月退款金额</div>
        </div>
        <div>
          <img src="@/assets/img/RYSJ.png" alt="">
        </div>
      </div>
    </div>
    <div class="flex">
      <div><img src="@/assets/img/banner.png" alt=""></div>
      <div style="margin-left: 40px;">
        <Line ref="line"></Line>
      </div>
    </div>
    <div style="margin-top:20px;width:91vw;">
      <el-table
        :data="dataList"
        style="width: 100%;"
        size="large"
      >
        <el-table-column
          prop="prodName"
          width="150"
          label="产品名称"
        />

        <el-table-column
          prop="productNums"
          header-align="center"
          align="center"
          label="购买数量"
        >
         </el-table-column>
         <el-table-column
           prop="actualTotal"
           align="center"
           label="付款金额"
         >
          </el-table-column>
        <el-table-column
          prop="status"
          align="center"
          label="订单状态"
         >
         <template #default="scope">
            <div>
              <span v-if="scope.row.status==1">待付款</span>
              <span v-if="scope.row.status==2">待发货</span>
              <span v-if="scope.row.status==3">待收货</span>
              <span v-if="scope.row.status==4">待评价</span>
              <span v-if="scope.row.status==5">成功</span>
              <span v-if="scope.row.status==6">失败</span>
            </div>
         </template>
        </el-table-column>
        <el-table-column
          prop="paystate"
          align="center"
          label="付款状态"
        >
        <template #default="scope">
           <div>
             <span v-if="scope.row.isPayed==1">已支付</span>
              <span v-if="scope.row.isPayed==0">未支付</span>
           </div>
        </template>
        </el-table-column>
        <el-table-column
          prop="payType"
          align="center"
          label="付款方式"
        >
        <template #default="scope">
           <div>
             <span v-if="scope.row.payType==0">手动代付</span>
             <span v-if="scope.row.payType==1">微信支付</span>
             <span v-if="scope.row.payType==2">支付宝</span>
           </div>
        </template>
        </el-table-column>
        <el-table-column
          prop="payTime"
          align="center"
          label="付款时间"
        >
        </el-table-column>
      </el-table>

    </div>

  </div>
</template>
<script setup>
import Line from './components/line.vue'
import { ref } from 'vue';
const numObj=ref({})
onMounted(() => {
  getNum()
  getOrderList()
 // this.$refs.line.getStatisticsList()
})
const getNum = () => {
   http({
    url: http.adornUrl('/admin/homePage/statistics'),
    method: 'get',
    data:{ }
  }).then(({ data }) => {
      console.log(data)
      numObj.value=data
  }).catch(() => {

  })
}
const dataList = ref([]);
const getOrderList = () => {
   http({
    url: http.adornUrl('/admin/homePage/getPendingShipmentOrder'),
    method: 'get',
    data:{ }
  }).then(({ data }) => {
      console.log(data)
      dataList.value=data
  }).catch(() => {

  })
}
// const lineList = ref([]);
// const getStatisticsList = () => {
//    http({
//     url: http.adornUrl('/admin/homePage/weekStatistics'),
//     method: 'get',
//     data:{ }
//   }).then(({ data }) => {
//       console.log(data)
//        lineList.value=data
//   }).catch(() => {

//   })
// }
</script>
<style lang="scss" scoped>
.mod-home {
  line-height: 1.5;
}
.flex{
  display: flex;
  align-items: center;

}
.banner{
 >div{
   width: 23%;
   background-color: #fff;
   margin: 20px 40px 20px 0 ;
   padding: 30px;
   justify-content: space-between;
   color:#0088FF;
   font-size: 13px;
   .num{
     font-size: 25px;
     // font-weight: bold;
         font-family: fantasy;
        letter-spacing: 1px;
   }
   img{
     width: 78px;
   }
 }
}
</style>
